<template>
  <view class="nanny-item" @click.stop=" clickHandler">
    <!-- 左侧头像 -->
    <img
      class="avatar"
      :src="row.avatarUrl"
      mode="aspectFill"
      v-if="!isLeader"
    />
    <!-- 中间信息 -->
    <view class="info">
      <view class="name-age">
        <text class="name">{{ row.talentName }}</text>
        <text class="gender" v-if="!isLeader">{{
          row.talentGender === '1' ? '男' : '女'
        }}</text>
        <text class="age" v-if="!isLeader">{{ row.talentAge }}</text>
      </view>
      <div v-if="row.tags && !isLeader" style="margin: 10px 0">
        <article-tag
          v-for="(item, index) in row.tags.split(',')"
          :key="index"
          :text="item"
          size="small"
        />
      </div>
      <view class="work-scope" v-if="!isLeader">
        擅长方向：{{ row.talentGoodDirection }}
      </view>
      <view class="work-scope" v-else>
        {{ row.talentGoodDirection }}
      </view>
      <view style="justify-content: flex-end; display: flex">
        <van-button
          size="small"
          round
          class="book-btn"
          style="margin-right: 10px"
          @click.stop="showTime = true"
          v-if="!isLeader && showBook"
          >预约
        </van-button>
        <van-button
          size="small"
          type="primary"
          round
          class="book-btn"
          style="color: #ffffff"
          @click.stop="
            $toPage(
              `/pages/consult/consultIm?receiver=${row.talentPhone}&personName=${row.talentName}`
            )
          "
          >咨询
        </van-button>
      </view>
    </view>
    <van-popup
      v-model="showTime"
      round
      position="bottom"
      :style="{ height: '60%' }"
      get-container="body"
    >
      <ne-pick title="预约" @cancel="showTime = false">
        <div>
          <div
            style="height: calc((100vh * 0.6) - 44px - 50px); overflow: auto"
          >
            <van-form ref="form">
              <van-field
                v-model="appointmentStartTimeName"
                label="开始时间"
                placeholder="请选择"
                readonly
                clickable
                @click="showTimeModal('appointmentStartTime')"
                :rules="[{ required: true, message: '请选择开始时间' }]"
              >
                <template #right-icon>
                  <img
                    src="@/static/image/rl-icon.png"
                    style="width: 16px; height: 16px"
                  />
                </template>
              </van-field>
              <van-field
                v-model="appointmentEndTimeName"
                label="结束时间"
                placeholder="请选择"
                readonly
                clickable
                @click="showTimeModal('appointmentEndTime')"
                :rules="[{ required: true, message: '请选择结束时间' }]"
              >
                <template #right-icon>
                  <img
                    src="@/static/image/rl-icon.png"
                    style="width: 16px; height: 16px"
                  />
                </template>
              </van-field>
            </van-form>
          </div>
          <div class="page-detail_footer box_footer">
            <van-button
              type="primary"
              round
              style="width: 200px; margin: 0 auto; flex: unset"
              @click="submit"
              >提交</van-button
            >
          </div>
        </div>
      </ne-pick>
    </van-popup>
    <van-popup
      v-model="showTimePopup"
      position="bottom"
      :close-on-click-overlay="false"
    >
      <van-datetime-picker
        @confirm="dateConfirm"
        @cancel="showTimePopup = false"
        v-if="timeType === 'appointmentStartTime'"
        v-model="appointmentStartTime"
        type="datetime"
        title="开始时间"
        :min-date="minDate"
        :max-date="maxDate"
      />
      <van-datetime-picker
        @confirm="dateConfirm"
        @cancel="showTimePopup = false"
        v-if="timeType === 'appointmentEndTime'"
        v-model="appointmentEndTime"
        type="datetime"
        title="结束时间"
        :min-date="minDate"
        :max-date="maxDate"
      />
    </van-popup>
  </view>
</template>

<script>
import ArticleTag from '../../../components/ArticleTag.vue'
import NePick from '../../../components/NePick.vue'
import dayjs from 'dayjs'
import { Dialog, Toast } from 'vant'
import { tbAppointmentSave } from '../../../api/tbAppointment'
import { mapGetters } from 'vuex'
export default {
  components: { NePick, ArticleTag },
  data() {
    return {
      showTimePopup: false,
      appointmentStartTimeName: '',
      appointmentEndTimeName: '',
      appointmentStartTime: new Date(),
      appointmentEndTime: new Date(),
      itemTimeName: '',
      showTime: false,
      timeType: '',
      minDate: new Date(2024, 0, 1),
      maxDate: new Date(2099, 10, 1),
    }
  },
  computed: {
    ...mapGetters(['userInfo']),
  },
  props: {
    disabled: {
      type: Boolean,
      default: false
    },
    row: {
      type: Object,
      default: () => ({}),
    },
    isLeader: {
      type: Boolean,
      default: false,
    },
    showBook:{
      type: Boolean,
      default: true
    }
  },
  methods: {
    clickHandler () {
      if(this.disabled) return 
       this.$toPage(`/pages/llhz/sharedDetail?indexCode=${this.row.indexCode}`)
    },
    dateConfirm(value) {
      this.showTimePopup = false
      this[this.timeType] = this.$dayjs(value).format('YYYY-MM-DD HH:mm:ss')
      this[`${this.timeType}Name`] = this.$dayjs(value).format(
        'YYYY-MM-DD HH:mm:ss'
      )
    },
    showTimeModal(type) {
      this.showTimePopup = true
      this.timeType = type
    },
    submit() {
      const _this = this
      const { talentName, talentPhone, indexCode } = _this.row
      const { personName, phone } = _this.userInfo
      const formData = {
        appointmentType: '4',
        itemIndexCode: indexCode,
        appointmentPersonName: personName,
        appointmentPhone: phone,
        appointmentUserId: _this.userInfo.userId,
        appointmentStartTime: dayjs(_this.appointmentStartTime).format(
          'YYYY-MM-DD HH:mm:ss'
        ),
        appointmentEndTime: dayjs(_this.appointmentEndTime).format(
          'YYYY-MM-DD HH:mm:ss'
        ),
        appointmentName: talentName,
        latitude: _this.latitude,
        longitude: _this.longitude,
        talentName: talentName,
        talentUserId: talentPhone,
      }
      const startTime = dayjs(formData.appointmentStartTime)
      const endTime = dayjs(formData.appointmentEndTime)
      const duration = endTime.diff(startTime, 'day')
      if (duration > 1) {
        Toast.fail('预约时间不能超过一天')
        return
      }
      this.$refs.form.validate().then(() => {
        Dialog.confirm({
          title: '提示',
          message: '是否确认提交?',
        })
          .then(() => {
            _this.$showLoading('提交中...')
            tbAppointmentSave(formData)
              .then(() => {
                _this.$hideLoading()
                _this.$emit('success')
                Toast.success('提交成功')
                _this.showTime = false
              })
              .catch(() => {
                _this.$hideLoading()
              })
          })
          .catch(() => {})
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.nanny-item {
  position: relative;
  display: flex;
  padding: 8px;
  background-color: $uni-color-success;
  border-radius: 8px;
  margin-bottom: 10px;

  &:last-child {
    margin-bottom: 0;
  }

  // 头像样式
  .avatar {
    width: 80px;
    height: 100px;
    border-radius: 8px;
    margin-right: 16px;
  }

  // 中间信息区域
  .info {
    flex: 1;

    .name-age {
      margin-bottom: 8px;

      .name {
        font-size: 16px;
        font-weight: bold;
        color: $uni-color-primary;
        margin-right: 8px;
      }

      .gender {
        font-size: 14px;
        color: #333333;
        margin-right: 10px;
        position: relative;
        &:after {
          position: absolute;
          top: 50%;
          transform: translateY(-50%);
          right: -6px;
          width: 1px;
          height: 80%;
          background: #333333;
          content: '';
          color: #333333;
          font-weight: bold;
        }
      }

      .age {
        font-size: 14px;
        color: #333333;
      }
    }

    .work-scope {
      font-size: 14px;
      color: #333333;
      display: flex;
      align-items: center;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 3; /* 限制行数为3 */
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }

  .points {
    font-size: 14px;
    font-weight: bold;
    padding: 2px 10px;
    border-radius: 0 8px 0 8px;
    position: absolute;
    top: 0;
    right: 0;
    background: #66c2ff;
    color: #f8e4a7;
  }

  .right {
    float: right;
    margin-top: 10px;
  }
}
</style>
